import React, {Component} from 'react';
import './css/04-clear.css'
class App extends Component {
    myref=React.createRef()
    state={
        list:[1,2,3,4,5,6,7,8,9,0,]
    }

    componentDidMount() {
        console.log(document.querySelector('#box').scrollHeight)
    }

    render() {
        console.log('render')
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        list:[...[11,23,45,56],...this.state.list]
                    })
                }}>click</button>

                <h1>邮箱应用</h1>
                <div id="box" ref={this.myref} style={{
                    height:'200px',
                    overflow:'auto'
                }}>
                    <ul>
                        {
                            this.state.list.map((item,index)=>
                            <li style={{
                                height:'100px',
                                background:'yellow'
                            }} key={index}>{item}</li>
                            )
                        }
                    </ul>
                </div>
            </div>
        );
    }

    // componentWillUpdate(nextProps, nextState, nextContext) {
    //     console.log('componentWillUpdate')
    // }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate',prevProps,prevState,snapshot)
        console.log(this.myref.current.scrollHeight)
        this.myref.current.scrollTop+=this.myref.current.scrollHeight-snapshot
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('getSnapshotBeforeUpdate')
        console.log(this.myref.current.scrollHeight)
        return this.myref.current.scrollHeight
    }
}

export default App;